<template>
  <div>
    <el-card>
      <Se @sendId="acceptId" :controlDiable="addAttriBox"></Se>
    </el-card>

    <el-card>

    <!-- 外层 -->
      <div v-show="addAttriBox">
       <el-button icon="el-icon-plus" type="primary" @click="changBox" style="margin-bottom:20px;" :disabled="!attriList.length > 0" >添加属性</el-button>
        <el-table :data="attriList" border  style="width: 100%;"  >
          <el-table-column  label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column  label="属性名" prop="name" width="80" align="center">
          </el-table-column>
          <el-table-column  label="属性值" prop="values" align="center">
            <template slot-scope="{row,$index}">
              <el-tag type="success" v-for="(citem) in row.values" :key="citem.id" style="margin-right:8px;">{{citem.value}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="{row}">
              
              <Lzbutton title="修改" type="warning" icon="el-icon-edit" size="mini" @click="editbeforeValue(row)"></Lzbutton>
               <el-popconfirm :title="`这是一段内容确定删除 ${ row.name } 吗？`" @onConfirm="removeAttribute(row)">
                 <Lzbutton title="删除" type="danger" icon="el-icon-delete" size="mini" slot="reference" ></Lzbutton>
              </el-popconfirm>                                       
            </template>

          </el-table-column>
        </el-table>
      </div>
      
      <!-- 内层 -->
    <div v-show="!addAttriBox">
      <el-form :inline="true" :model="showForm" class="demo-form-inline"  style="width: 100%;" >
         <el-form-item label="属性名">
         <el-input v-model="showForm.name" placeholder="属性名"></el-input>
        </el-form-item>
      </el-form>
      <div >
        <el-button icon="el-icon-plus" type="primary" @click="addAttribute" :disabled="!showForm.name">添加属性值</el-button>
        <el-button @click="closeBox">取消</el-button>

      </div>


      <!-- 点击添加后才显示表单属性 -->

      <el-table :data="showForm.values" border style="width:100%;margin:20px 0" >
        <el-table-column label="序号" width="100" type="index" align="center">
        </el-table-column>
        <el-table-column label="属性值">
          <template slot-scope="{row,$index}" >
            <el-input v-if="row.isEdit"  :ref="$index" v-model="row.value" placeholder="请输入属性值" @keyup.enter.native="tolook(row,$index)" @blur="tolook(row)"> 

            </el-input>
            <span v-else @click="toEdit(row,$index)" style="display: block ;width: 100%;">{{row.value}}</span>

          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template slot-scope="{row,$index}">
               <el-popconfirm :title="`这是一段内容确定删除${ row.value }吗？`" @onConfirm="removeValue($index)">
                 <Lzbutton title="删除" type="danger" icon="el-icon-delete" size="mini" slot="reference" ></Lzbutton>
              </el-popconfirm>
          </template>          
        </el-table-column>
      </el-table>

        <el-button  type="primary" @click="save" :disabled="showForm.values.length < 1">保存</el-button>
        <el-button @click="closeBox">取消</el-button>
    </div>     
      </el-card>

  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name:'Attribute',
  data(){
    return{

      attriList:[],
      showForm:{
        nd2:'',
        name:'',
        values:[],
        
        // rd3:''
      },
      // 添加属性框
      addAttriBox:true,
      categorynd2:''
    }
  },
  mounted(){
    // this.acceptId(16)  //调用数据使用
  },
  methods:{
   async getcategory(){
       let result = await this.$api.category.reqCategory3rd(this.categorynd2)
      if(result.status != 200) this.$message.error('获取分类属性失败')
      this.attriList = result.data
    },

    async acceptId(id){
      
      this.categorynd2 = id.nd2
      this.getcategory()
    },
    // 外层修改
    editbeforeValue(row){
    
       this.showForm={
        nd2:this.categorynd2,
        goods_attri:row.id,
        name:row.name,
        values:_.cloneDeep(row.values)
      }
      this.showForm.values.forEach(item => this.$set(item,'isEdit',false))
      this.addAttriBox = false
    },

      

    
    // 打开添加属性框
    changBox(){
      // 还原默认值
      this.showForm={
        nd2:this.categorynd2,
        name:'',
        values:[
          
        ],
      }

      this.addAttriBox = false
    },
    closeBox(){
       this.addAttriBox = true
    },
    // 添加属性值
    addAttribute(){

      this.showForm.values.push({
        value:'',
        isEdit:true

      })
      this.$nextTick(()=>{
        this.$refs[this.showForm.values.length -1].focus()
      })
    },

    // 改变状态
    toEdit(row,$index){
      row.isEdit = true
      // 聚焦
      this.$nextTick(()=>{
        this.$refs[$index].focus()
      })

    },
    tolook(row,$index){
      if(row.value.trim() === ''){
        row.value = ''
        return
      }
      let isReapt =this.showForm.values.some(item =>{
        
        if(row != item){
         return row.value == item.value
        }
      })
      if(isReapt){
        this.$message.warning('属性值已存在请重新输入')
        return row.value = ''
      }

      row.isEdit = false

    },
    // 删除属性值
    removeValue($index){
      
      this.showForm.values.splice($index,1)
    },
    // 提交数据前的准备
   async save(){
      // 去空值数据
      this.showForm.values.filter(item =>{
        if(item.value.trim() != ''){
        // 删除isEidt
          delete item.isEdit
          return true
        }
      })
      if(this.showForm.values.length < 1){
        return this.$message.warning('不能提交空值')
      }
      try{
        let result = await this.$api.category.reqUpdateAttribute(this.showForm)
        if(result.status != 200){
          return this.$message.error('保存失败')
        }
        this.$message.success('保存成功')
        this.getcategory()

      }catch{
        this.$message.error('失败')

      }
    },
    // 删除分类属性
    async removeAttribute(row){
      try{
        let result = await this.$api.category.reqDelAttribute({id:row.id})
        if(result.status === 200){
          this.$message.success('更新成功')
          this.getcategory()
          
        }
      }catch{
        this.$message.error('失败')
      }
    }
  }
}
</script>

<style>

</style>